<template>
	<div>

		<van-cell title="移位单" class="cell_header_title"/>

		<ChangeWarehouse v-on:listenToChangeWarehouseEvent="changeWarehouseId"></ChangeWarehouse>

		<van-field v-model="keyword" center clearable label="输入关键字" placeholder="请输入sku包含的关键字">
			<template #button>
				<van-button size="small" type="primary" v-on:click="searchKeyword_">查询SKU数量</van-button>
			</template>
		</van-field>

		<van-cell-group v-for="(value, key, index) in sku_info">
			<van-cell :title="'id' + key + ':' + value.spu_name" :label="attribute(key)" is-link @click="show_detail(value.id)" />
		</van-cell-group>

		<div style="height: 100px;"></div>


		<van-popup v-model="show" position="bottom" :style="{ height: '60%' }">
			<SkuDetail :skuId="sku_id" :warehouseId="warehouse_id"></SkuDetail>
		</van-popup>


	</div>
</template>

<script>
	import {
		Toast
	} from 'vant'
	import select_all_sku_detail_by_warehouse_id from "../../utils/select_all_sku_detail_by_warehouse_id.js"
	import ChangeWarehouse from "../change_item/change_warehouse.vue"
	import select_all_sku from "../../utils/select_all_sku.js"
	import SkuDetail from './sku_detail.vue'
	export default {
		name: '',
		components: {
			ChangeWarehouse,
			SkuDetail
		},
		props: {},
		data() {
			return {
				// warehouse:'一号库房',

				show: false,
				warehouse_id: null,
				sku_info: {},
				all_sku_info: {},
				sku_id: '',
				keyword: '',
				
			}
		},
		methods: {
			
			attribute(sku_id){
				
				let attr_list = this.all_sku_info.attribute[sku_id]
				if (attr_list == null){
					return '当前sku没有属性，请尽快添加属性|' + '数量：' + this.all_sku_info.count[sku_id]
				}
				let attr_str = ''
				for(let i of attr_list){
					attr_str = attr_str 
							  + i.attribute_key 
							  + ':' 
							  + i.attribute_value 
							  + '|'
				}
				
				return attr_str + '数量：' + this.all_sku_info.count[sku_id]
								
			},
			
			changeWarehouseId(data) {
				// console.log(data)
				this.warehouse_id = data.warehouse_id
				select_all_sku_detail_by_warehouse_id(
					this.warehouse_id,
					res=>{
						// console.log(res)
						this.all_sku_info = res
						this.sku_info = res.sku_info
					}
				)
			},

			show_detail(sku_id) {
				
				// console.log(sku_id)
				this.sku_id = sku_id
				

				this.show = true
			},

			searchKeyword_() {
				// console.log(this.keyword)
				
				if(this.warehouse_id==null){
					Toast('请选择查询的库房')
					return
				}

				if (this.keyword == '') {
					Toast('请输入关键字')

					return
				}

				let sku_info = {}


				if (this.keyword == '') {
					Toast('请输入关键字')

					return
				}

				for (let i in this.all_sku_info.sku_info) {
					if (this.all_sku_info.sku_info[i].spu_name.toLowerCase().indexOf(this.keyword.toLowerCase()) != -1) {
						// console.log(i.value.toLowerCase().indexOf(this.keyword.toLowerCase()))
						// this.sku_list.push(this.all_sku_info.sku_info[i])
						// console.log(i)
						
						sku_info[i] = this.all_sku_info.sku_info[i]
					}
					
				}
				
				this.sku_info = sku_info
				
				// console.log(this.sku_info)
				
			}

		},
		computed: {},
		watch: {},
		created() {},
		mounted() {


		},
	}
</script>

<style scoped lang="less">
	.cell_header_title {
		background-color: #F0F0F0;
		font-weight: 800;
	}
</style>
